<template>
	<view class="container">
		<Search></Search>
		<Preference :preferdata="preferdata"></Preference>
		<Nearby></Nearby>
		<view @click="poll()"  :catchtouchmove="true">
			<Filter id="box-locate" :class="{'is_fixed': isfixed}" ></Filter>
		</view>
		<view style="height: 50upx;"></view>
		<Takeout :takeshop="takeshop"></Takeout>
	</view>
</template>

<script>
	import Search from './components/search.vue'
	import Preference from './components/preference.vue'
	import Nearby from './components/nearby.vue'
	import Filter from './components/filter.vue'
	import Takeout from './components/takeout.vue'
	
	import {listing} from  '@/api/api.js'
	import {getpreferurl, wxshopurl} from '@/api/request.js'
	import {mapState} from 'vuex'
	
	export default {
		components:{
			Search,
			Preference,
			Nearby,
			Filter,
			Takeout
		},
		data() {
			return {
				menutop: '',
				rect: '',
				isfixed: false,
				topdata: '',
				preferdata: [],
				takeshop: [],
			}
		},
		onLoad() {

		},
		methods: {
			preference(){
				// 批量并发请求多个接口 promise.all
				Promise.all([listing(getpreferurl), listing(wxshopurl)])
					.then((res)=>{
						console.log(res)
						this.preferdata = res[0].data;
						this.takeshop = res[1].data;
					})
					.catch((err)=>{
						console.log(err)
					})
			},
			// 附近商家
			
			poll(){
				wx.pageScrollTo({
					scrollTop: this.topdata,
					duration: 300
				})
			}
			
		},
		
		onLoad(){
			const query = wx.createSelectorQuery()
			query.select('#box-locate').boundingClientRect()
			query.exec((res)=>{
			  // res[0].top       // #the-id节点的上边界坐标
			  // res[1].scrollTop // 显示区域的竖直滚动位置
			  // console.log(res[0].top)
			  this.menutop = res[0].top
			  this.topdata = res[0].top
			})
		}, 
		
		onPageScroll(e) {
			// console.log(e)
			this.rect = e.scrollTop;
		},
		
		
		mounted(){
			this.preference()
		},
		
		computed:{
			...mapState(['screendata']),
			namepage(){
				if(this.rect > this.menutop){
					this.isfixed = true
				}else{
					this.isfixed = false
				}
			},
				
			count(){
				this.takeshop = this.screendata.screenarr
			}
		},
	}
</script>

<style>
	.container{
		margin: 0 15upx;
	}
		
	.is_fixed{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}
</style>
